<template>
	<view>

			<!-- <view class="bg" ></view> -->
			<image v-if="headHelpImg" class="bg" :src="headHelpImg" mode=""></image>
			<image v-else  class="bg" src="'../../static/122.png'" mode=""></image>
	
	<!-- 	<image class="bg" :src="headHelpImg" mode=""></image> -->
		<view class="p-fff10">
			<!-- <sunui-navbar :items="dynamicTagsHelp" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex"
				padding="20rpx" :size="90" activeLineBg="#fff" textAlign="center" activeLineWidth="40%"
				activeDirection="center" activeLineHeight="4rpx" bgColor="#fff" :margin="10"
				></sunui-navbar> -->
			<v-tabs v-model="current" :tabs="dynamicTagsHelp" @change="changeTab"></v-tabs>
		</view>
		<view class="flex-wrap-justifyBetween padding15">
			<block v-if="list.length">
				<view class="help-top" v-for="(item,index) in list" :key="index">
				
					<view class="cardHelper " @click="detail(item.id)">
						<!-- <image class="img-124" :src="item.icon"></image> -->
						<image class="img-124" :src="item.icon+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode=""></image>
				
						<view class="name font-overflow4">
							{{item.heading}}
						</view>
				
				
				
					</view>
				
				</view>
			</block>
			<block v-else>
				<image src="../../static/tips.png" mode="aspectFit"></image>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],

				currentIndex: 0,
				dynamicTagsHelp: [],
				current: 0,
				headHelpImg:''
			}
		},

		onLoad() {

            	this.getHostSysConfigInfoFn()

		},
        onInit(){
		
		},
		onShow() {
			
			
			
		},

		methods: {
			async initList(){
				console.log(this.dynamicTagsHelp)
				const result = await this.$http.post({
					url: this.$api.helpPageList,
					data: {
						sortLabel: this.dynamicTagsHelp[0]
					}
				
				});
				console.log(result)
				if (result.code = 2000) {
					 if(result.data.length){
						 this.list = result.data
					 }else{
						 this.list = []
					 }
				
				}
			},
			async getHostSysConfigInfoFn() {
				const result = await this.$http.post({
					url: this.$api.getHostSysConfigInfo,

				});
				console.log(result)
				if (result.code == 2000) {
					if (result.data.helpSortLabel.length) {
						this.headHelpImg = result.data.helpImg
						 
						const helpSortLabel = result.data.helpSortLabel
						let helpList = []

						if (helpSortLabel.includes(',')) {
							
							// 包含的进行slice(',') 分割
							helpList = helpSortLabel.split(',').map((item) => item.trim());
						} else {
							
							helpList = helpSortLabel.split();
						}

						let newArray = helpList.map((item, index) => {
							// return {
							// 	id: index,
							// 	name: item

							// }
							return item
						})

					


				        


					  
						this.$nextTick(()=>{
							setTimeout(() =>{
							   this.dynamicTagsHelp = newArray;
							}, 10);
							
						})
						
						this.initList()
						
						// this.$set(this, 'dynamicTagsHelp', newArray);

						// console.log(this.dynamicTagsHelp)
					}else{
						
					}

				} else {
					this.$sun.toast(result.msg)
				}
			},

			detail(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/index/helpDetail?id=' + id
				})
			},
			async changeTab(index) {

				this.current = index;
				console.log(index)
				// this.mescroll.resetUpScroll();
				const result = await this.$http.post({
					url: this.$api.helpPageList,
					data: {
						sortLabel: this.dynamicTagsHelp[index]
					}

				});
				console.log(result)
				if (result.code = 2000) {
					this.list = result.data

				}


			},




		}
	}
</script>

<style lang="scss">
	.p-fff10 {
		margin-bottom: 15rpx;
	}
	.padding15{
		padding: 15rpx;
	}

	.cardHelper {
		width: 352rpx;
		background-color: #FFF;
	}

	.img-124 {
		width: 352rpx;
		height: 236rpx;
		margin-left: auto;
	}

	.name {
		color: #333333;
		padding: 16rpx;
		word-wrap: break-word;
	}

	.img-123 {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.help-top {
		
		// border-radius: 20rpx;
		margin-top: 20rpx;
		
		background-color: #FFF;
	}

	.bg {
		width: 750rpx;
		height: 350rpx;

		background: url('~static/122.png');

		background-repeat: no-repeat;
		background-size: contain;
	}

	.p-fff10 {
		display: flex;
		justify-content: center;
	}
</style>